<template>
  <view class="manage-option">
    <uni-easyinput v-model="searchValue" placeholder="请输入搜索内容">
      <template #right>
        <button class="search-btn" @tap="search">
          <uni-icons type="search" color="#fff" size="16"></uni-icons>
          搜索
        </button>
      </template>
    </uni-easyinput>
    <view class="option-list">
      <view
        class="option-item"
        :class="{ 'option-item-active': activeIndex === 0 }"
        @tap="changeActive(0)"
      >
        已报名
      </view>
      <view
        class="option-item"
        :class="{ 'option-item-active': activeIndex === 1 }"
        @tap="changeActive(1)"
      >
        待审
      </view>
      <view
        class="option-item"
        :class="{ 'option-item-active': activeIndex === 2 }"
        @tap="changeActive(2)"
      >
        拒绝
      </view>
    </view>
    <registered-player
      ref="registeredPlayerRef"
      v-show="activeIndex === 0"
      :id="id"
    ></registered-player>
    <review-player
      ref="reviewPlayerRef"
      v-show="activeIndex === 1"
      :id="id"
    ></review-player>
    <reject-player
      ref="rejectPlayerRef"
      v-show="activeIndex === 2"
      :id="id"
    ></reject-player>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import registeredPlayer from "./components/registeredPlayer.vue";
import reviewPlayer from "./components/reviewPlayer.vue";
import rejectPlayer from "./components/rejectPlayer.vue";

// 接收页面参数
defineProps<{
  id: string;
}>();

const registeredPlayerRef = ref<InstanceType<typeof registeredPlayer>>();
const reviewPlayerRef = ref<InstanceType<typeof reviewPlayer>>();
const rejectPlayerRef = ref<InstanceType<typeof rejectPlayer>>();

const searchValue = ref("");

const activeIndex = ref(0);
const changeActive = (index: number) => {
  activeIndex.value = index;
  if (index === 0) {
    registeredPlayerRef.value?.getPlayerList(searchValue.value);
  } else if (index === 1) {
    reviewPlayerRef.value?.getPlayerList(searchValue.value);
  } else if (index === 2) {
    rejectPlayerRef.value?.getPlayerList(searchValue.value);
  }
};

// 搜索功能
const search = async () => {
  registeredPlayerRef.value?.getPlayerList(searchValue.value);
  reviewPlayerRef.value?.getPlayerList(searchValue.value);
  rejectPlayerRef.value?.getPlayerList(searchValue.value);
};
</script>
<style scoped lang="scss">
.manage-option {
  padding: 20rpx;

  .search-btn {
    line-height: 72rpx;
    background-color: #2979ff;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #fff;
  }
  .option-list {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
    .option-item {
      width: 30%;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      background-color: #fff;
      position: relative;
    }
    .option-item-active {
      font-weight: bold;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%; /* 设置为 100% 以显示在下方 */
        margin-left: calc(50% - 22rpx);
        width: 44rpx;
        height: 6rpx; /* 条的高度 */
        background-color: #00fffb; /* 绿色背景 */
        border-radius: 4rpx; /* 可选，给条添加圆角 */
      }
    }
  }
}
</style>
